import React, { Component } from 'react';
import './UserLogin.scss'
import {user_login} from './utils/api'

class login extends Component {
    constructor(props){
        super(props);
        this.state={
            userphone:'',
            userpass:'',
        }
    }
    render() {
        return (
            <div id='login'>
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgdown.baidu.com%2Fimg%2F0%2F512_512%2F62049053e7362283f8ff9f25ba071af2.png&refer=http%3A%2F%2Fgdown.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670660059&t=da59944cf5b789df9176f3e09b21c95d" alt="" />
                <input type="text" className='phone' name='userphone' onChange={(e)=>{this.change(e)}} onBlur={(e)=>{this.validation(e)}} placeholder='请输入手机号'/>
                <input type="text" className='pass' name='userpass' onChange={(e)=>{this.change(e)}} placeholder='请输入密码'/>
                <button className='login' onClick={()=>{this.click()}}>登陆</button>
                <span className='register'>注册</span>
            </div>
        );
    }

    change(e){
        this.setState({
            [e.target.name]:e.target.value
        },()=>{console.log(this.state);})
        console.log(this.state);
    }
    validation(e){
        var reg=new RegExp(/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/)
        if(!(reg.test(e.target.value))){
            alert('输入的手机号格式不正确，请重新输入')
        }
    }
    click(){
        user_login({phone:this.state.userphone,pass:this.state.userpass}).then((res)=>{
            if(res.data.code==200){
                alert(res.data.msg)
                console.log(res.data);
            }else{
                alert(res.data.msg+'请核实手机号或密码后重新登陆！')
            }
        })
    }
}

export default login;